<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听器</title>
	</head>
	<body>
		<div id = "app">
		   年龄: <input type = "text" v-model="person.age">
		   <p v-if="info">{{info}}</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
    		    data() {
    		        return {
    		            person: {
        		      	    name: 'lisi',
        		      	    age: 0
        		        },
        		        info: ''
    		        }
    		    },
    		    watch : {
    		    	// 该回调会在person对象的属性改变时被调用，
    		    	// 无论该属性被嵌套多深
    		    	person: {
    		    		handler(val, oldVal){
							console.log(`val = ${val} oldval = ${oldVal}`);
    			    		if(val.age >= 18)
    			    			this.info = '已成年';
    			    		else
    			    			this.info = '未成年';
    		    		},
    		    		deep: true,
    		    		immediate: true
    		    	}
    		    }
		    }).mount('#app');
		</script>
	</body>
</html>